<template>
<tabbar v-model="active" :fixed="false" route active-color="black" >
  <tabbar-item :to="'/'" >
    宝甄
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </tabbar-item>
  <tabbar-item :to="{ name: 'Play' }" >
    会玩
    <template #icon="props">
      <img :src="props.active ? icon1.active : icon1.inactive" />
    </template>
  </tabbar-item>
  <tabbar-item :to="{name:'Post'}">
    <div class="post">
     <span><strong>卖</strong></span>
     <span>闲置</span>
    </div>
  </tabbar-item>
  <tabbar-item :to="{ name: 'Message' }" >
    消息
    <template #icon="props">
      <img :src="props.active ? icon2.active : icon2.inactive" />
    </template>
  </tabbar-item>
  <tabbar-item :to="{ name: 'User' }">
    我的
    <template #icon="props">
      <img :src="props.active ? icon3.active : icon3.inactive" />
    </template>
  </tabbar-item>
</tabbar>
</template>
<script setup>
 import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { Tabbar, TabbarItem } from 'vant';
 
 const active = ref(0);
 const icon = {
      active: 'https://s1.328888.xyz/2022/10/05/PWQli.png',
      inactive:
        'https://s1.328888.xyz/2022/10/05/PWim5.png',
    };
 const icon1 = {
      active: 'https://s1.328888.xyz/2022/10/05/PWvdC.png',
      inactive:
        'https://s1.328888.xyz/2022/10/05/PdNfU.png',
    };
 const icon2 = {
      active: 'https://s1.328888.xyz/2022/10/05/PdOr6.png',
      inactive:
        'https://s1.328888.xyz/2022/10/05/PdumX.png',
    };
 const icon3 = {
      active: 'https://s1.328888.xyz/2022/10/05/Pd01I.png',
      inactive:
        'https://s1.328888.xyz/2022/10/05/Pd4yj.png',
    };
</script>
<style scoped>
  img{
    width: 8vw;
    height: 7vw;
  }
.post{
  background-color: #FFC731;
  height: 70px;
  width: 70px;
  border-radius: 70px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px;
  right: -1px;
  border: 7px solid white;
}
.post span:first-child{
  font-size: 32px;
}
.post span:last-child{
  width: 12px;
  font-size: 12px;
}

</style>